<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试工具集</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">


<!--
工具模块往往应用在边边角角
我们将一些工具性元素放入 util 模块中，
以供选择性使用。其内部由多个小工具组件组成，
他们也许不是必须的，但很多时候却能为你的页面提供良好的辅助作用。
-->
</head>
<body>

<button class="layui-btn" lay-active="e1">事件1</button>
<button class="layui-btn" lay-active="e2">事件2</button>
<button class="layui-btn" lay-active="e3">事件3</button>
<br/>
<ul id="demo00001" style="margin-left: 30px">
<li>12</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
    <div id="test倒计时"></div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li><img src="../pic/hashiqi.jpg"></li>
<li><img src="../pic/hashiqi.jpg"></li>
</ul>

<script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>
<script src="../zujian/layui/layui.all.js"></script>
<script>
    layui.use('util', function(){
        let util = layui.util;


        // util.event(attr, obj, eventType)
        // 用于更好地批量处理事件。
        // 参数 attr：绑定需要监听事件的元素属性
        // 参数 obj：事件回调链
        // 参数 eventType：事件类型（默认 click）
        //处理属性 为 lay-active 的所有元素事件
        util.event('lay-active', {
            e1: function(){
                alert('触发了事件1');
            }
            ,e2: function(){
                alert('触发了事件2');
            }
            ,e3: function(){
                alert('触发了事件3');
            }
        },'click');




        //执行  注意 bar在右下角
        //注意默认那个topbar只有在页面比较长的时候,一个屏幕占不完的时候才会出现
        //点击右下角top会直接到页面顶端
        util.fixbar({
            bar1: true
           ,bar2:true
            ,bgcolor:'#992a73'
            // 用于控制出现TOP按钮的滚动条高度临界值。默认：200
            ,showHeight:50
            // 你可以通过重置bar的位置，比如 css: {right: 100, bottom: 100}
            ,css:{right: 3, bottom: 30}
            ,click: function(type){
                console.log(type);
                if(type === 'bar1'){
                    alert('点击了bar1')
                }else if(type==='bar2'){
                    alert('你点击了bar2')
                }else if(type==='top'){
                    alert('点击了top')
                }
            }
        });



        //倒计时
        //这是一个精致的封装，它并不负责 UI 元素的呈现，而仅仅只是返回倒计时的数据，
        // 这意味着你可以将它应用在任何倒计时相关的业务中。
       // 语法：util.countdown(endTime, serverTime, callback)
        //示例
        let endTime = new Date(2099,1,1).getTime() //假设为结束日期
            ,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
        // 回调函数。如果倒计时尚在运行，则每一秒都会执行一次。并且返回三个参数： date（包含天/时/分/秒的对象）、
        // serverTime（当前服务器时间戳或Date对象）, timer（计时器返回的ID值，用于clearTimeout）
        util.countdown(endTime, serverTime, function(date, serverTime, timer){
            //alert(JSON.stringify(timer))
            let str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
            layui.$('#test倒计时').html('距离2099年1月1日还有：'+ str);
        });

        //倒计时
        //某个时间在当前时间的多久前。
        // 参数 time：即为某个时间的时间戳或日期对象
        // 参数 onlyDate：是否在超过30天后，只返回日期字符，而不返回时分秒
        // 如果在3分钟以内，返回：刚刚
        // 如果在30天以内，返回：若干分钟前、若干小时前、若干天前，如：5分钟前
        // 如果在30天以上，返回：日期字符，如：2017-01-01
        // util.timeAgo(time, onlyDate)
        //  注意 new Date()中月份是从0开始的 0代表1月,2代表3月, 其他都正常
        alert(util.timeAgo(new Date(2020,1,11,22,10,45,56).getTime(), false))

        // 转化时间戳或日期对象为日期格式字符
        // 参数 time：可以是日期对象，也可以是毫秒数
        // 参数 format：日期字符格式（默认：yyyy-MM-dd HH:mm:ss），可随意定义，如：yyyy年MM月dd日
        //  注意 new Date()中月份是从0开始的 0代表1月,2代表3月, 其他都正常
        alert(util.toDateString(new Date(2020,1,11,22,10,45,56), 'yyyy-MM-dd HH:mm:ss'))


        // util.digit(num, length)
        //数字前置补零
        // 参数 num：原始数字
        // 参数 length：数字长度，如果原始数字长度小于 length，则前面补零，如：util.digit(7, 3) //007
        alert(util.digit(7,3))


        // 转义 xss 字符,  xxs属于一种攻击,就是在提交面板里提交一些特殊字符或者js代码等
        // 参数 str：任意字符
        // util.escape(str)





    });







</script>
</body>
</html>